<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <PageTools>
          <!-- 插槽左边的位置 -->
          <template #left> 员工管理 {{ Pagination.total }} </template>
          <!-- 插槽右边的位置 -->
          <template #right>
            <el-button
              v-allow="'import_employee'"
              type="warning"
              size="small"
              @click="excel"
            >导入excel</el-button>
            <el-button
              type="danger"
              size="small"
              @click="deriveExcel"
            >导出excel</el-button>
            <el-button
              type="danger"
              size="small"
              @click="deriveExcelAll"
            >导出所有数据</el-button>
            <el-button
              type="primary"
              size="small"
              @click="dialogVisible = !dialogVisible"
            >新增员工</el-button>
          </template>
        </PageTools>
      </el-card>
      <!-- 表格结构 -->
      <div class="cardbox">
        <el-card>
          <!-- 具体页面结构 -->
          <el-table :data="list" border style="width: 100%">
            <el-table-column label="序号" type="index" width="150px">
              <template v-slot="{ $index }">
                <span>
                  {{ getIndex($index) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="头像" width="100px">
              <template v-slot="{ row }">
                <!-- <img :src="row.staffPhoto"> -->
                <ImageHolder :src="row.staffPhoto" />
              </template>
            </el-table-column>
            <el-table-column
              prop="username"
              sortable
              label="姓名"
              width="150px"
            />
            <el-table-column
              prop="mobile"
              sortable
              label="手机号"
              width="150px"
            />
            <el-table-column
              prop="workNumber"
              sortable
              label="工号"
              width="150px"
            />
            <el-table-column
              prop="formOfEmployment"
              label="聘用形式"
              width="200px"
              sortable
            >
              <template v-slot="{ row }">
                {{ formatEmployment(row.formOfEmployment) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="departmentName"
              sortable
              label="部门"
              width="200px"
            />
            <el-table-column
              prop="timeOfEntry"
              label="入职时间"
              width="150px"
            />
            <el-table-column fixed="right" label="操作" width="280">
              <template v-slot="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(row.id)"
                >查看</el-button>
                <el-button type="text" size="small">转正</el-button>
                <el-button type="text" size="small">调离</el-button>
                <el-button type="text" size="small">离职</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="hEditRole(row)"
                >分配角色</el-button>
                <!-- <el-button type="text" size="small">编辑</el-button> -->
                <el-button
                  type="text"
                  size="small"
                  @click="hDel(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              :total="Pagination.total"
              :page-size="Pagination.size"
              :page-sizes="[2, 5, 10]"
              :current-page="Pagination.page"
              @current-change="hCurrentChange"
              @size-change="hSizeChange"
            />
          </el-row>
        </el-card>
      </div>
    </div>
    <!-- 弹出层 -->
    <el-dialog
      v-if="dialogVisible"
      title="新增员工"
      :visible.sync="dialogVisible"
      width="30%"
      @close="hCloseDialog"
    >
      <EmpDialog
        ref="AddEmployee"
        @close="dialogVisible = false"
        @update-empolyee="hUpdateEmpolyee"
      />
    </el-dialog>
    <!-- 分配角色 -->
    <el-dialog :visible.sync="showDialogRole" title="分配角色">
      <assign-role
        v-if="showDialogRole"
        :id="curEmployeId"
        @close="showDialogRole = false"
      />
    </el-dialog>
  </div>
</template>
<script>
// 导入格式化时间
import dayjs from 'dayjs'
import { getEmployeeList, delEmployee } from '@/api/employees.js'
import EmployeeEnum from '@/constant/employees.js'
import EmpDialog from './empDialog.vue'
import assignRole from './assignRole.vue'
export default {
  components: {
    EmpDialog,
    assignRole
  },
  // 定义过滤器
  data() {
    return {
      list: [],
      Pagination: {
        page: 1, // 当前页码
        size: 10, // 每页几条
        total: 0 // 总共数据条数
      },
      curEmployeId: '', // 当前的员工编号
      // 编辑添加弹出层
      dialogVisible: false,
      // 分配角色弹出层
      showDialogRole: false
    }
  },
  computed: {
    // 计算最大页码值
    maxtotal() {
      return Math.ceil(this.Pagination.total / this.Pagination.size)
    },
    // 最后一页是否为满的
    isLastPageFulled() {
      return this.Pagination.total % this.Pagination.size === 0
    }
  },
  created() {
    // 判断是否是从详情页面跳转过来的
    if (this.$route.query.page) {
      // 跳转回来的 size
      this.Pagination.page = parseInt(this.$route.query.page)
      // 跳转回来的 page
      this.Pagination.size = parseInt(this.$route.query.size)
    }
    this.loadEmployeeList()
  },
  methods: {
    // 计算索引
    getIndex(index) {
      return index + (this.Pagination.page - 1) * this.Pagination.size + 1
    },
    // 初始化 员工列表
    async loadEmployeeList() {
      try {
        const { data } = await getEmployeeList(
          this.Pagination.page,
          this.Pagination.size
        )
        this.list = data.rows
        this.list.map(
          item =>
            (item.timeOfEntry = dayjs(item.timeOfEntry).format('YYYY-MM-DD'))
        )
        this.Pagination.total = data.total
      } catch (error) {
        console.log(error)
      }
    },
    formatEmployment(id) {
      // 优化代码格式化
      const hireType = EmployeeEnum.hireType.reduce(
        (acc, item) => ({ ...acc, [item.id]: item.value }),
        {}
      )
      // 从hireType中 通过id找到对应的元素的value
      // const item = EmployeeEnum.hireType.find(it => it.id === num)
      // if (item) {
      //   return item.value
      // } else {
      //   return '不能确定'
      // }
      return hireType[id]
    },
    // 封装删除员工函数
    async doDel(id) {
      try {
        await delEmployee(id)
        // 如果当前是最后一页 ,数据是否为最后一条 则 判断页面值
        if (this.list.length === 1) {
          this.Pagination.page--
          if (this.Pagination.page < 0) {
            this.Pagination.page = 1
          }
        }
        this.$message.success('删除成功')
        // 重新加载数据
        this.loadEmployeeList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    // 删除员工
    hDel(id) {
      this.$confirm('确认删除吗')
        .then(() => {
          // 确定删除
          this.doDel(id)
        })
        .catch(() => {})
    },
    // 分配角色
    hEditRole(data) {
      this.showDialogRole = true
      this.curEmployeId = data.id // 当前的员工编号
    },

    // 当页面值发生变化时候触发
    hCurrentChange(page) {
      this.Pagination.page = page
      // 重新发起请
      this.loadEmployeeList()
    },
    // 每页显示几条
    hSizeChange(size) {
      this.Pagination.size = size
      // 重新发起请
      this.loadEmployeeList()
    },
    // 收到子组件抛出的添加成功的事件
    hUpdateEmpolyee() {
      // 跳转页面值
      if (this.isLastPageFulled) {
        this.Pagination.page = this.maxtotal + 1
        this.Pagination.total++
      } else {
        this.Pagination.page = this.maxtotal
      }
      // 重新发起请
      this.loadEmployeeList()
      this.showDialog = false
    },
    // 关闭弹层
    // 1. 在表单中点击取消（添加成功）
    // 2. 弹层上点击 X
    hCloseDialog() {
      // 相当于是在父组件中去执行子组件中方法
      // 去清空 子组件中的表单数据和校验结果
      // 子组件.resetForm()
      this.$refs.AddEmployee.resetForm()
    },
    // 查看用户详情
    handleClick(id) {
      this.$router.push(
        `/employees/detail?id=${id}&page=${this.Pagination.page}&size=${this.Pagination.size}`
      )
    },
    // 导入  Excel 跳转路由
    excel() {
      this.$router.push('/import')
    },
    // 封装导出 excel 函数
    FunExcel(page, size) {
      import('@/vendor/Export2Excel').then(async excel => {
        // excel表示导入的模块对象
        const res = await getEmployeeList(page, size)
        const { header, data } = this.fromatData(res.data.rows)
        // excel表示导入的模块对象
        excel.export_json_to_excel({
          multiHeader: [], // 多表头 要求是一个二维数组
          merges: [], // 合并
          // header: ['姓名', '工资'], // 表头 必填
          // data: [
          //   ['刘备', 100],
          //   ['关羽', 500]
          // ], // 具体数据 必填
          header,
          data, // 要求是一个二维数组
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // 导出所有数据
    deriveExcelAll() {
      this.FunExcel(1, this.Pagination.total)
    },
    // 导出 Excel
    deriveExcel() {
      this.FunExcel(this.Pagination.page, this.Pagination.size)
    },
    // 处理导出 Excel 数据
    fromatData(list) {
      // 准备 导出数据的表头
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      let header = []
      // header = ['id', 'mobile', 'username', .....]
      // data = [
      //     ['65c2', '1380000002', '管理员', ....],
      //     ['65c3', '1380000003', '孙财', ....],
      // ]
      let data = []
      // 开始代码
      // 找到一个元素
      const one = list[0]
      if (!one) {
        return { header, data }
      }

      // 利用拿到的第一个元素，遍历他的 key 值，在我们准备的 map 表头中查找是否存在，之后返回一个数组
      header = Object.keys(one).map(key => {
        if (map[key]) {
          return map[key]
        }
      })
      // data把list中每一个对象转成 对应的value数组
      data = list.map(obj => {
        // 把  Obj['formOfEmployment']: 1 , 2   ---> '正式'， '非正式'
        const key = obj['formOfEmployment'] // 1, 2

        obj['formOfEmployment'] = EmployeeEnum.hireType.filter(
          e => e.id === parseInt(key)
        )[0].id // hireTypEnmu:{1:'正式', '2':'非正式' }

        return Object.values(obj)
      })

      return { header, data }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .cardbox {
    margin-top: 10px;
    ::v-deep.el-table td {
      height: 32px !important;
      padding: 10px 0 !important;
    }
  }
}
</style>
